<script setup lang="ts">
import { ref, watch } from 'vue'
import { SvgIcon } from '@/components/common';
//import {   FeedTask} from '@/api/suno';
import { sunoStore, SunoMedia } from '@/api/sunoStore';
import useClipboard from "vue-clipboard3";
import playui from './playui.vue';
import { homeStore } from '@/store';
import { mlog } from '@/api';
import { NEmpty, NImage, useMessage, useNotification, NotificationType } from "naive-ui"
import { FeedTask } from '@/api/suno';

const { toClipboard } = useClipboard();
const list = ref<SunoMedia[]>([]);
const csuno = new sunoStore()
const st = ref({ playid: '' });
const notification = useNotification()
const ms = useMessage();
const initLoad = () => {
    let arr = csuno.getObjs();
    list.value = arr.reverse()
}

const getNowCls = (v: any) => {
    if (v.id == st.value.playid) {
        return ['bg-gray-200', 'dark:bg-black']
    }
    return [];
}
const goPlay = (v: SunoMedia) => {
    if (v.status == 'error') {
        ms.info("这首歌生成失败！")
        return;
    }
    st.value.playid = v.id
    homeStore.setMyData({ act: 'goPlay', actData: v })

    if (v.status != 'complete') {
        FeedTask([v.id])
    }
}


const extend = (v: SunoMedia) => {
    mlog("extend", extend)
    //homeStore.myData.actData
    homeStore.setMyData({ act: "suno.extend", actData: v })
}

const sp = ref({ v: 10, max: 0, status: '', idDrop: false });

watch(() => homeStore.myData.act, (n) => {
    if (n == 'FeedTask') {
        initLoad()
    }
    if (n == 'playEned') {
        //
        let i = list.value.findIndex((v) => v.id == st.value.playid)
        i++;
        mlog('playEned,', i, list.value.length)
        if (i < list.value.length) setTimeout(() => goPlay(list.value[i]), 1000)
    }
});

const getExSuno = (id: string) => {
    id = id.replace("m_", '');
    let index = list.value.findIndex(v => v.id == id);

    if (index < 0) {
        return null;
    }
    return list.value[index];
}
const update = (v: any) => {
    sp.value = v

}
const notify = (type: NotificationType) => {
    notification[type]({
        content: '提示',
        meta: '分享链接已复制',
        duration: 2500,
        keepAliveOnHover: true
    })
}
const toShare = (v: SunoMedia) => {
    // console.log("🚀 ~ toShare ~ v:", v)
    // var domain = window.location.host;
    const sharePath = `http://sunoshare.phpme.top/?id=${v.id}`
    toClipboard(sharePath)
    notify('success')


}
initLoad();
</script>
<template>
    <div v-if="list.length > 0">
        <div v-for="item in list" :class="getNowCls(item)"
            class="flex relative  justify-between items-start p-2 hover:dark:bg-black hover:bg-gray-200 border-b-[1px] border-gray-500/10 ">

            <playui @update="update" v-if="st.playid == item.id" class="absolute top-[-4px] left-0 w-full  z-10">
            </playui>
            <div class="w-[60px] h-[60px] relative  cursor-pointer" @click="goPlay(item)">

                <template v-if="item.status == 'complete'">
                    <n-image lazy width="100" :src="item.image_url" preview-disabled>
                        <template #placeholder>
                            <div class="w-full h-full justify-center items-center flex">
                                <SvgIcon icon="line-md:downloading-loop" class="text-[40px] text-green-300"></SvgIcon>
                            </div>
                        </template>
                    </n-image>
                    <div class="absolute top-0 right-0 w-full h-full flex justify-center items-center"
                        v-if="st.playid == item.id">
                        <SvgIcon icon="mdi:pause-circle-outline" class="text-[40px] text-[#fff]"
                            v-if="sp.status == 'pause'"></SvgIcon>
                        <SvgIcon icon="mdi:play-circle-outline" class="text-[40px] text-[#fff]" v-else></SvgIcon>
                    </div>
                </template>
                <template v-else>
                    <n-image lazy width="100" :src="item.image_url" preview-disabled />
                    <div class="absolute top-0 right-0  w-full h-full justify-center items-center flex">
                        <SvgIcon icon="line-md:downloading-loop" class="text-[40px] text-green-300"></SvgIcon>
                    </div>
                </template>



            </div>
            <div class="flex-1  pl-2">
                <div class="flex justify-between line-clamp-1 w-full cursor-pointer" @click="goPlay(item)">
                    <div class="flex justify-start items-center">
                        <h3>{{ item.title }}</h3>
                        <div class="text-[8px] flex items-center border-[1px] border-gray-500/30 px-1 ml-1 list-none rounded-md"
                            v-if="item.metadata?.type == 'upload'">Uploaded</div>
                    </div>
                    <div class="opacity-80">{{ item.metadata.tags }}</div>
                </div>
                <div class="opacity-60 line-clamp-1 w-full text-[12px] cursor-pointer" @click="goPlay(item)"
                    v-if="item.metadata && item.metadata.prompt">
                    {{ item.metadata.prompt }}
                </div>
                <div class="opacity-60 line-clamp-1 w-full text-[12px] cursor-pointer" @click="goPlay(item)" v-else>
                    {{ $t('suno.noly') }}
                </div>
                <div class="text-right text-[14px] flex justify-end items-center space-x-2  ">
                    <div class="text-[8px] flex items-center border-[1px] border-gray-500/30 px-1 list-none rounded-md"
                        v-if="item.metadata?.audio_prompt_id">
                        {{ $t('suno.extendFrom') }}:{{ getExSuno(item.metadata?.audio_prompt_id)?.title }}
                    </div>
                    <div v-if="item.status == 'error'"
                        class="text-[8px] flex items-center border-[1px] border-red-500/80 px-1 list-none rounded-md ">
                        {{
                            $t('suno.fail') }}</div>
                    <template v-if="item.metadata && item.metadata.duration">
                        <div
                            class="text-[8px] flex items-center border-[1px] border-gray-500/30 px-1 list-none rounded-md">
                            {{ item.metadata.duration.toFixed(1) }}s</div>
                        <div @click="extend(item)"
                            class="text-[8px] flex items-center border-[1px] border-gray-500/30 px-1 list-none rounded-md cursor-pointer">
                            {{ $t('suno.extend') }}</div>
                    </template>
                    <div class="text-[8px] flex items-center border-[1px] border-gray-500/30 px-1 list-none rounded-md"
                        v-if="item.major_model_version"> {{ item.major_model_version }}</div>
                    <SvgIcon icon="mdi:play-circle-outline" class="cursor-pointer" @click="goPlay(item)" />
                    <a :href="item.audio_url" download target="_blank">
                        <SvgIcon icon="mdi:download" class="cursor-pointer" />
                    </a>
                    <svg style="width: 14px;" @click="toShare(item)" xmlns="http://www.w3.org/2000/svg"
                        xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 28 28">
                        <g fill="none">
                            <path
                                d="M18.27 3.21l7.5 7.25a.751.751 0 0 1 0 1.08l-7.5 7.25a.73.73 0 0 1-.52.21a.75.75 0 0 1-.75-.75v-3.74c-6.7.27-9.52 4.02-9.64 4.18a.77.77 0 0 1-.84.27a.75.75 0 0 1-.52-.71c0-8.02 6.59-10.48 11-10.73V3.75a.75.75 0 0 1 .46-.69a.74.74 0 0 1 .81.15zm.23 10.54v2.71L24.17 11L18.5 5.52v2.73a.76.76 0 0 1-.75.75c-.97 0-8.85.22-10.09 7.28A15.58 15.58 0 0 1 17.75 13a.76.76 0 0 1 .75.75zm4.223 5.473A.76.76 0 0 1 23.25 19a.76.76 0 0 1 .75.75v.5A4.75 4.75 0 0 1 19.25 25H7.75A4.75 4.75 0 0 1 3 20.25V8.75A4.75 4.75 0 0 1 7.75 4h4.5a.75.75 0 1 1 0 1.5h-4.5A3.26 3.26 0 0 0 4.5 8.75v11.5a3.26 3.26 0 0 0 3.25 3.25h11.5a3.26 3.26 0 0 0 3.25-3.25v-.5a.76.76 0 0 1 .223-.527z"
                                fill="currentColor"></path>
                        </g>
                    </svg>

                </div>

            </div>
        </div>
    </div>
    <div class="w-full h-full flex justify-center items-center" v-else>
        <NEmpty :description="$t('suno.nodata')"></NEmpty>
    </div>

</template>
